<template>
  <div>
    <h1>订单列表</h1>
    <el-form
      :inline="true"
      :model="model"
      class="demo-form-inline"
      label-width="80px"
      @submit.native.prevent="onSubmit"
    >
      <el-form-item label="订单号:">
        <el-input v-model="model.orderNumber" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input v-model="model.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-select v-model="model.state" placeholder="请选择订单状态">
          <el-option v-for="(item, i) in states" :key="i" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tabs type="border-card">
      <el-tab-pane label="全部">全部</el-tab-pane>
      <el-tab-pane label="待付款">待付款</el-tab-pane>
      <el-tab-pane label="待发货">待发货</el-tab-pane>
      <el-tab-pane label="已发货">已发货</el-tab-pane>
      <el-tab-pane label="已完成">已完成</el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
export default {
  data() {
    return {
      orders: [],
      states: ["待付款", "待发货", "已发货", "已完成"],
      model: {}
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>